<template>
  <view id="navigation-bar" class="navigation-bar over-hidden bg-white" :style="{position, background:isImmersion ? `rgba(78, 158, 254, ${opacity})` : background, top}">
    <view class="relative">
      <by-status-bar v-if="showStatusBar" />
      <slot name="leading" />
      <view class="navigation flex-row align-center padding-lr-10">
        <view v-if="showBar" class="width-full flex-row align-center justify-between padding-right-22">
          <view class="flex-row align-center flex-item" :class="showBack ? 'padding-left-10' : 'padding-left-22'">
            <by-view v-if="showBack" @click="back">
              <view class="back-icon-box padding-right-10 padding-top-10 padding-bottom-10 margin-right-10">
                <text class="technician-fanhui back-icon color-t1 text-bold" :style="{color:textColor || color}" />
              </view>
            </by-view>

            <slot>
              <text class="text-34 color-t1" :class="{'text-bold':bold}" :style="{color:textColor || color}">{{ title }}</text>
            </slot>
          </view>

          <slot name="ending" />
        </view>
      </view>
    </view>
    <slot name="background" />
  </view>
</template>

<script setup lang="ts">
import { jump, getElementInfo } from '@/common/util'
import type { TStrOrNum } from '@/common/types'

interface IProps {
  position: 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed',
  showBack: boolean,
  showBar: boolean,
  bold: boolean,
  showStatusBar: boolean,
  background?: string,
  title?: string,
  color?: string,
  top?: TStrOrNum,
  backFn?: () => void
}
const props = withDefaults(defineProps<IProps>(), {
  position: 'sticky',
  showBack: true,
  showStatusBar: false,
  bold: true,
  showBar: true
})

const $emit = defineEmits(['mounted'])

function back() {
  const { showBack, backFn } = props
  if (!showBack) return
  backFn && backFn() || jump()
}

const isImmersion = ref(false)
const opacity = ref(0)
const textColor = ref('')

const page = getCurrentInstance()
onMounted(async() => {
  const res = await getElementInfo('#navigation-bar', page)
  $emit('mounted', res.height)
})

/* function setImmersion(scrollTop:number) {
  isImmersion.value = true
  if (scrollTop <= 100 || opacity.value < 1) opacity.value = scrollTop / 100

  if (opacity.value < 0.5 && textColor.value === '#FFFFFF') textColor.value = props.color ?? ''
  else if (opacity.value >= 0.5 && textColor.value !== '#FFFFFF') textColor.value = '#FFFFFF'
}

defineExpose({
  setImmersion
})*/
</script>

<style scoped lang="scss">
@include setPadding(left, 22);

@include setPadding(right, 22);

.navigation-bar{
  width: 100%;
  z-index: 100;
  top: 0;

  .navigation{
    min-height: 44px;
  }

  .back-icon{
    @include setFontSize(44);
  }

}
</style>
